<template>
	<view>
		<view class="page_title">
			<nav-back></nav-back>
			<view class="page_name">{{activeType==0?'我看过谁':'谁看过我'}}</view>
			<view class="blank"></view>
		</view>

		<scroll-view scroll-y class="scroll" :refresher-enabled="true" :refresher-triggered="isTrigger"
			@refresherrefresh="handleRefresh" refresher-background='tranparent'>
			<view class="service_list banxin">
				<view class="service_item" v-for="item in recordList">
					<view class="service_box">
						<view class="service">
							<image :src="item.avatar" mode="" />
							<view class="content">
								<view class="service_title">
									<view class="name">{{item.name}} </view>
									<image v-if="item.sex==0" src="/static/img/woman.png" mode="" />
									<image v-else src="/static/img/man.png" mode="" />
								</view>
								<text>{{item.age}}岁 {{item.height}}cm {{item.education}}</text>
							</view>
							<view class="utils">
								<view class="count">
									<image src="/static/img/eye.png" mode="" />
									第{{item.visitCount}}次看{{activeType==0?'Ta':'我'}}
								</view>
								<text>{{item.visitTime}}</text>
							</view>
						</view>
<!-- 						<view class="right" v-if="activeWay=='come' && item.status==2">
							<view class="btn agree" @click="handleAgree(item.id)">
								同意交互微信
							</view>
							<view class="btn refuse" @click="handleRefuse(item.id)">
								残忍拒绝
							</view>
						</view> -->
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import request from '@/utils/request.js'
	import NavBack from '@/components/NavBack.vue'

	export default {
		components: {
			NavBack
		},
		data() {
			return {
				activeType: 0,
				recordList: [],
				isTrigger: false,
				_freshing: false
			};
		},
		onLoad(option) {
			console.log(option, 'onLoad');
			this.activeType = option.type
			this.initRecord()
		},
		methods: {
			initRecord() {
				let that = this
				if (this.activeType == 0) {
					request(`/employee/viewed`).then((res) => {
						console.log(res.data.data, 'initRecord');
						that.recordList = res.data.data
						that.isTrigger = false
						that._freshing = false
					})
				} else {
					request(`/employee/viewer`).then((res) => {
						console.log(res.data.data, 'initRecord');
						that.recordList = res.data.data
						that.isTrigger = false
						that._freshing = false
					})
				}
			},
			handleRefresh() {
				if (this._freshing) return
				this._freshing = true
				this.isTrigger = true;
				this.initRecord()
			},
		}
	}
</script>

<style lang="scss">
.service_list{
  margin-top: 40rpx;
  .service_item{
    margin-top: 30rpx;
    .apply_time{
      display: flex;
      align-items: center;
      font-size:24rpx;
      line-height: 40rpx;
      color: rgba(102, 102, 102, 1);
      .point{
        width: 32rpx;
        height: 32rpx;
        border-radius: 50%;
        margin-right: 20rpx;
        background-color: rgba(156, 156, 255, 1);
      }
    }
    .service_box{
      padding:30rpx;
      border-radius: 60rpx;
      background-color: rgba(235, 235, 255, 1);
      margin-top: 20rpx;
      .service{
        display: flex;
        justify-content: space-between;
        align-items: center;
        >image{
          width: 100rpx;
          height: 100rpx;
          margin-right: 40rpx;
          border-radius: 50%;
        }
        .content{
          flex: 1;
          height: 100rpx;
          font-size: 20rpx;
          color: rgba(102, 102, 102, 1);
          line-height: 28rpx;
		  text{
			  font-size: 24rpx;
		  }
          .service_title{
            display: flex;
            align-items: center;
            font-size: 28rpx;
            font-weight: 500;
            line-height: 40rpx;
            margin: 10rpx 0;
            margin-bottom: 20rpx;
            .name{
				color: rgba(51, 51, 51, 1);
				font-weight: 500;
				line-height: 46rpx;
              max-width: 200rpx;
              white-space: nowrap; /* 确保文本在一行内显示 */
              overflow: hidden; /* 隐藏溢出的内容 */
              text-overflow: ellipsis; 
            }
            image{
              width: 40rpx;
              height: 40rpx;
              margin: 0 10rpx;
            }
          }
        }
        .utils{
          text-align: right;
          .count{
            font-size: 24rpx;
            display: flex;
            align-items: center;
            color: rgba(107, 107, 255, 1);
            image{
              width: 32rpx;
              height: 32rpx;
              margin: 0 10rpx;
            }
          }
          text{
            color: rgba(102, 102, 102, 1);
            display: block;
            font-size: 20rpx;
            text-align: center;
            margin-top: 20rpx;
          }
        }
      }
    }
  }
}

.scroll{
  height: 85vh;
  margin-top: 0rpx;
}
</style>